<template>
  <div class="page">
    <!-- 筛选：订单号、用户、时间范围、状态 -->
    <el-form :inline="true" :model="query" class="mb-12">
      <el-form-item label="订单号">
        <el-input v-model="query.orderNo" placeholder="请输入订单号" clearable />
      </el-form-item>
      <el-form-item label="用户">
        <el-input v-model="query.user" placeholder="用户名 / ID" clearable />
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker v-model="query.range" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="query.status" placeholder="请选择" clearable>
          <el-option label="待支付" value="unpaid" />
          <el-option label="已支付" value="paid" />
          <el-option label="待发货" value="unshipped" />
          <el-option label="已发货" value="shipped" />
          <el-option label="已完成" value="completed" />
          <el-option label="已取消" value="canceled" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格：合并展示商品列表，总金额，状态等 -->
    <el-table :data="list" border>
      <el-table-column prop="orderNo" label="订单号" min-width="160" />
      <el-table-column prop="userText" label="关联用户" min-width="140" />
      <el-table-column prop="itemsText" label="商品列表" min-width="220" />
      <el-table-column prop="totalAmount" label="总金额" width="120" />
      <el-table-column prop="payStatusText" label="支付状态" width="120" />
      <el-table-column prop="shipStatusText" label="发货状态" width="120" />
      <el-table-column prop="finishStatusText" label="完成状态" width="120" />
      <el-table-column prop="createdAt" label="创建时间" min-width="160" />
      <el-table-column label="操作" width="240">
        <template #default="{ row }">
          <el-button size="small" @click="openDetail(row)">详情</el-button>
          <el-button size="small" type="primary" @click="batchUpdate(row)">更新状态</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="mt-12 flex-end">
      <el-pagination background layout="prev, pager, next, total" :total="total" :page-size="pageSize" :current-page="page" @current-change="(p)=>{page=p; fetchList()}" />
    </div>

    <!-- 详情弹窗：展示完整流程日志（示例） -->
    <el-dialog v-model="visible" title="订单详情" width="720px">
      <el-timeline>
        <el-timeline-item v-for="(log, idx) in logs" :key="idx" :timestamp="log.time" :type="log.type">
          {{ log.text }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script setup>
// 订单管理页面：列表、详情、批量状态更新的前端骨架
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

const query = reactive({ orderNo: '', user: '', range: [], status: '' })
const list = ref([])
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)

const visible = ref(false)
const logs = ref([])

function fetchList(){
  const items = Array.from({ length: pageSize.value }, (_, i) => ({
    orderNo: `NO${String(100000+i)}`,
    userText: `用户${i+1} / ID:${i+1}`,
    itemsText: `商品A x${i+1}；商品B x${i%3+1}`,
    totalAmount: (300 + i * 50).toFixed(2),
    payStatusText: i % 2 === 0 ? '已支付' : '待支付',
    shipStatusText: i % 3 === 0 ? '已发货' : '待发货',
    finishStatusText: i % 4 === 0 ? '已完成' : '未完成',
    createdAt: dayjs().subtract(i, 'day').format('YYYY-MM-DD HH:mm:ss')
  }))
  list.value = items
  total.value = 200
}

function onSearch(){ page.value = 1; fetchList() }
function onReset(){ query.orderNo=''; query.user=''; query.range=[]; query.status=''; onSearch() }

function openDetail(row){
  visible.value = true
  logs.value = [
    { time: dayjs().subtract(3,'day').format('YYYY-MM-DD HH:mm:ss'), text: '创建订单', type: 'primary' },
    { time: dayjs().subtract(2,'day').format('YYYY-MM-DD HH:mm:ss'), text: '支付成功', type: 'success' },
    { time: dayjs().subtract(1,'day').format('YYYY-MM-DD HH:mm:ss'), text: '仓库发货', type: 'warning' },
    { time: dayjs().format('YYYY-MM-DD HH:mm:ss'), text: '完成订单', type: 'info' }
  ]
}

function batchUpdate(row){
  // 示例：批量更新部分状态
  ElMessage.success('状态更新成功（示例）')
}

onMounted(fetchList)
</script>

<style scoped>
.page { background: #fff; padding: 16px; border: 1px solid #ebeef5; }
.mb-12 { margin-bottom: 12px; }
.mt-12 { margin-top: 12px; }
.flex-end { display: flex; justify-content: flex-end; }
</style>